<template>
  <div ref="chart1" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
// 引入接口
import { reqWordCloudAPI } from '@/api/visual/index'

const chart1 = ref()
const { proxy } = getCurrentInstance() as any
const data = ref([])
// 发起请求的函数
const init = async () => {
  let res = await reqWordCloudAPI()
  if (res.code === 200) {
    data.value = res.data.datas
  }
}
onMounted(() => {
  init().then(() => {
    // 获取挂载的组件实例
    const echarts = proxy.$ECharts
    //初始化挂载
    const echarts1 = echarts.init(chart1.value)
    //添加配置
    echarts1.setOption({
      tooltip: {
        show: true,
        formatter: function (params) {
          // 返回你想要显示的内容，可以展示词的名称和词频值
          return `${params.name}: ${params.value}`
        },
      },
      series: [
        {
          type: 'wordCloud',
          gridSize: 7,
          sizeRange: [15, 40],
          rotationRange: [-90, 90],
          // rotationStep: 45,
          shape: 'circle',
          width: '100%',
          height: '100%',
          drawOutOfBound: false,
          textStyle: {
            normal: {
              color: function () {
                return (
                  'rgb(' +
                  [
                    Math.round(Math.random() * 500),
                    Math.round(Math.random() * 300),
                    Math.round(Math.random() * 200),
                  ].join(',') +
                  ')'
                )
              },
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#ffffff',
            },
          },
          data: data.value,
        },
      ],
    })
    // 自适应
    window.onresize = function () {
      echarts1.resize()
    }
  })
})
</script>

<style lang="scss" scoped></style>
